<style>
  .item {
    border-bottom: 2px solid gray;
    margin-bottom: 10px;
  }
</style>
<div id="content">...正在加在数据</div>

<script src="./getjson.js"></script>
<script>
  // 一次取出所有商品数据（data1-3.json），显示完整商品列表
  // 每条数据的模版
  /*
  <div class='item'>
    <img src='图片'/>
    <div>
      <h2>标题</h2>
      <p>时间</p>
      <p>价格</p>
      <p>内容</p>
    </div>
  </div>
  */

// const promises = [
//   getJSON('./data1.json'),
//   getJSON('./data2.json'),
//   getJSON('./data3.json')
// ]
const promises = [...Array(3)]
  .map((_, index) => `./data${index+1}.json`)
  .map(url => getJSON(url))
Promise.all(promises).then((datas) => {
  const items = datas.reduce((items, data) => {
    // return items.concat(data.data)
    return [...items, ...data.data]
  }, [])
  document.getElementById('content').innerHTML =
    items.map(item => `<div class='item'>
      <img src='${item.article_pic}'/>
      <div>
        <h2>${item.article_title}</h2>
        <p>${item.article_date}</p>
        <p>${item.article_price}</p>
        <p>${item.article_content}</p>
      </div>
    </div>`).join('')
})

</script>
